import React, { Component } from 'react';
import Header from './Header/index';
import List from './List/index';
import Footer from './Footer/index';
import './App.css';
export default class App extends Component {
  // 初始化数据
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: false },
      { id: '003', name: '打游戏', done: true },
      { id: '004', name: '写代码', done: false },
    ],
  };

  // addTodo用于添加一个todo
  addTodo = (todoObj) => {
    // 获取原todos
    const { todos } = this.state;
    const newTodos = [todoObj, ...todos];
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // updateTodo用于更新一个todo
  updateTodo = (id, done) => {
    // 获取原todos
    const { todos } = this.state;
    // 更新todos中对应id的todo的done属性
    const newTodos = todos.map((todo) => {
      if (todo.id === id) return { ...todo, done };
      else return { ...todo };
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // deleteTodo用于删除一个todo
  deleteTodo = (id) => {
    // 获取原todos
    const { todos } = this.state;
    // 删除todos中对应id的todo
    const newTodos = todos.filter((todo) => todo.id !== id);
    // 更新状态
    this.setState({ todos: newTodos });
  };

  // checkAllTodo用于全选或全不选
  checkAllTodo = (done) => {
    // 获取原todos
    const { todos } = this.state;
    // 更新todos中所有todo的done属性
    const newTodos = todos.map((todo) => {
      return { ...todo, done };
    });
    // 更新状态
    this.setState({ todos: newTodos });
  };
  // clearAllDone用于清除所有已完成
  clearAllDone = () => {
    // 获取原todos
    const { todos } = this.state;
    // 加工数据
    const newTodos = todos.filter((todo) => !todo.done);
    // 更新状态
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className='todo-container'>
        <div className='todo-wrap'>
          <Header addTodo={this.addTodo} />
          <List
            todos={todos}
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            todos={todos}
            checkAllTodo={this.checkAllTodo}
            clearAllDone={this.clearAllDone}
          />
        </div>
      </div>
    );
  }
}
